<style>
    .form-submit{
      background: #F5F5F5;
      margin: 0;
    }
    .form-pc-mb .mb-hidden{
      display: none;
    }
    .form-content{
      background: #fff;
      border-radius: 8px;
    }
    .form-pc-mb {
      padding-bottom: 120px;
    }
    .form-style .kl-private-reset-css-Xuajs1 label {
       align-items: flex-start !important;
       font-weight: normal !important;
    }

    @media screen and (max-width: 900px) {
        .form-pc-mb .pc-hidden{
           display: none;
         }
        .form-pc-mb .mb-hidden{
           display: block;
         }
         .form-pc-mb {
            padding-bottom: 60px;
            background: #fff;
        }
        .form-submit {
          padding-top: 20px;
        }
        .form-content{
          border-radius: 0;
        }
     }

</style>
<div class="form-pc-mb">
    <div class="page-width">
      <div class="form-content">
        <div class="pc-hidden">
          {% if section.settings.pc_form != blank %}
             {{ section.settings.pc_form }}
          {% endif %}
        </div>
        <div class="mb-hidden">
          {% if section.settings.mb_form != blank %}
            {{ section.settings.mb_form }}
          {% endif %}
        </div>
      </div>
    </div>
</div>


{% schema %}
    {
      "name": "Form pc mb",
      "tag": "section",
      "class": "form-submit spaced-section spaced-section--full-width",
      "settings": [
         {
            "type": "text",
            "id": "heading",
            "label": "Heading"
         },
         {
            "type": "html",
            "id": "pc_form",
            "label": "Form pc"
         },
         {
            "type": "html",
            "id": "mb_form",
            "label": "Form mb"
         }
      ],
      "blocks":[],
      "presets": [
        {
          "name": "Form pc mb"
        }
      ]
    }
      {% endschema %}